<template>
    <div>
        <!-- 平台邀请二维码 -->
        <!-- <Modal v-model="modal2" footer-hide width="400">
            <p slot="header" style="text-align:center">
                <span>平台绑定邀请</span>
            </p>
            <div class="disFlex vertical Flex-middle" style="text-align:center">
                <div class="user-message disFlex Flex-middle Flex-between">
                    <div class="user disFlex Flex-middle">
                        <img width="70" height="70" src="http://image.chihe.so/shop/sign/2014/10/15/default_sign.jpg">
                        <span style="margin-left: 15px;">我是用户名称</span>
                    </div>
                </div>
                <span class="shop-name">"麦地店"</span>
                <span class="poter-name">店员权限</span>
                <div class="line"></div>
                <img class="binding-code" src="http://image.chihe.so/shop/sign/2014/10/15/default_sign.jpg">
                <span class="code-text">让相应人员用微信扫一扫进行扫码</span>
                <span class="code-text" style="margin-top: 10px;">改码将于 60s 后失效</span>
            </div>
        </Modal> -->

        <!-- 弹窗类型 -->
        <Modal v-model="modelSwitch" :width="modalWidth" :footer-hide="modelType=='addPeopleMessage'">
            <p slot="header" style="text-align:center">
                <!-- 新增商圈标题 -->
                <span v-if="modelType=='addShopCircle'">新增商圈</span>
                <!-- 编辑人员信息 -->
                <span v-if="modelType=='editPeopleMessage'">编辑人员信息</span>
                <!-- 添加核销人员 -->
                <span v-if="modelType=='addPeopleMessage'">平台绑定邀请</span>
            </p> 
            <div v-if="modelType=='addShopCircle'" class="disFlex vertical" style="text-align:center">
                <div class="input disFlex Flex-middle">
                    <div class="input-span">商圈名称</div>
                    <Input class="input-input" v-model="addShopCircleData.area_title"></Input>
                </div>
                <div class="input des disFlex Flex-middle">
                    <div class="input-span"></div>
                    <span>数字越大排序越靠前</span>
                </div>
                <div class="input disFlex Flex-middle">
                    <div class="input-span">商圈排序</div>
                    <Input class="input-input" v-model="addShopCircleData.area_sort"></Input>
                </div>
                <div class="input des disFlex Flex-middle">
                    <div class="input-span"></div>
                    <span>数字越大排序越靠前，在搜索时将按此序号排序</span>
                </div>
                <div class="input disFlex Flex-middle">
                    <div class="input-span">图片</div>
                    <div class="input-img disFlex Flex-middle">
                        <img :src="addShopCircleData.area_image" />
                        <upload :spread="true" @confirmUpload="replyFn"></upload>
                    </div>
                </div>
                <div class="input des disFlex Flex-middle">
                    <div class="input-span"></div>
                    <span>支持尺寸</span>
                </div>
            </div>
            <div v-if="modelType=='addShopCircle'" slot="footer">
                <div class="disFlex Flex-center"> 
                    <Button v-if="addShopCircleEvent=='addCircleFn'" type="primary" @click="addCircleFn">添加</Button>
                    <Button v-if="addShopCircleEvent=='editCircleFn'" type="primary" @click="editCircleFn">保存</Button>
                </div>
            </div>

            <!-- 编辑人员信息标题 -->
            <div v-if="modelType=='editPeopleMessage'">
                <div class="user-message disFlex Flex-middle Flex-between">
                    <div class="user disFlex Flex-middle">
                        <img width="70" height="70" src="http://image.chihe.so/shop/sign/2014/10/15/default_sign.jpg">
                        <span style="margin-left: 15px;">我是用户名称</span>
                    </div>
                    <div class="user-invitation disFlex vertical">
                        <p class="disFlex Flex-middle">
                            <span style="width: 60px;text-align: left;">邀请人</span> 
                            <span>Hong</span>
                        </p>
                        <p class="disFlex Flex-middle" style="margin-top: 15px;">
                            <span style="width: 60px;text-align: left;">绑定时间</span>
                            <span>2018-12-12 12:12</span>
                        </p>
                    </div>
                </div>
                <div class="disFlex" style="width: 100%;margin-top: 30px;">
                    <p style="width: 80px;text-align: left;line-height: 18px;">拥有权限</p>
                    <RadioGroup style="width: calc(100% - 80px);" class="disFlex" v-model="phone">
                        <div class="user-power disFlex Flex vertical">
                            <Radio class="disFlex Flex-middle" label="apple">
                                <span>管理员权限</span>
                            </Radio>
                            <span class="text-left">可查看及管理订单</span>
                            <span class="text-left">可查看各个门店核销数据情况</span>
                            <span class="text-left">可查看品牌的交易数据</span>
                            <span class="text-left">可核销订单，核销数归第一门店</span>
                            <span class="text-left">可管理门店和品牌信息</span>
                            <span class="text-left">可管理人员，新增/删除人员</span>
                        </div>

                        <div class="user-power disFlex Flex vertical">
                            <Radio class="disFlex Flex-middle" label="apple">
                                <span>店员权限</span>
                            </Radio>
                            <span class="text-left">可查看及管理订单</span>
                            <span class="text-left">可查看所属门店核销数据</span>
                            <span class="text-left">可核销订单，核销数归所属门店</span>
                        </div>
                    </RadioGroup>
                </div>
                <div class="clearFloat" style="margin-top: 30px;">
                    <p style="width: 80px;text-align: left;line-height: 18px;float: left;">所属门店</p>
                    <RadioGroup style="float: left;width: calc(100% - 80px);" v-model="phone">
                        <Radio class="shop-select-item disFlex Flex-middle" label="apple">
                            <span>所有分店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="android">
                            <span>麦地店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="windows">
                            <span>江北店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="android">
                            <span>麦地店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="windows">
                            <span>江北店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="android">
                            <span>麦地店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="windows">
                            <span>江北店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="android">
                            <span>麦地店</span>
                        </Radio>
                        <Radio class="shop-select-item disFlex Flex-middle" label="windows">
                            <span>江北店</span>
                        </Radio>
                    </RadioGroup>
                </div>
            </div>
            <div v-if="modelType=='editPeopleMessage'" slot="footer">
                <div class="disFlex Flex-center">
                    <Button type="primary">保存</Button>
                    <Button type="default" style="margin-left: 15px;" @click="closeFn">取消</Button>
                </div>
            </div>

            <!-- 添加核销人员 -->
            <div v-if="modelType=='addPeopleMessage'" class="disFlex vertical Flex-middle" style="text-align:center">
                <div class="user-message disFlex Flex-middle Flex-between">
                    <div class="user disFlex Flex-middle">
                        <img width="70" height="70" src="http://image.chihe.so/shop/sign/2014/10/15/default_sign.jpg">
                        <span style="margin-left: 15px;">我是用户名称</span>
                    </div>
                </div>
                <span class="shop-name">"麦地店"</span>
                <span class="poter-name">店员权限</span>
                <div class="line"></div>
                <img class="binding-code" src="http://image.chihe.so/shop/sign/2014/10/15/default_sign.jpg">
                <span class="code-text">让相应人员用微信扫一扫进行扫码</span>
                <span class="code-text" style="margin-top: 10px;">改码将于 60s 后失效</span>
            </div>
        </Modal> 
    </div>
</template>
<script>
    import {shopCircleAdd,shopCircleUpdate} from 'api/shop'
    import upload from "base/upload/upload";

    export default {
        name: 'shopEditMessage',
        data () {
            return {
                // 弹窗开关
                modelSwitch: false,

                // 弹窗类型
                modelType: '',

                // 弹窗宽度
                modalWidth: 400,

                phone: 'apple',

                // 添加商圈数据
                addShopCircleData: {
                    area_title: '',
                    area_sort: '',
                    area_image: '',
                },

                // 新增/编辑商圈事件
                addShopCircleEvent: 'addCircleFn'
            }
        },
        components: {
            upload,
        },
        methods: {
            del () {
                this.modal_loading = true;
                setTimeout(() => {
                    this.modal_loading = false;
                    this.modal2 = false;
                    this.$Message.success('Successfully delete');
                }, 2000);
            },

            // 打开商圈
            openFn(_type,_obj,_width = 400){ 
                // 判断是否是添加商圈
                if(_type == 'addShopCircle' && Object.keys(_obj).length != 0){
                    this.addShopCircleEvent = 'editCircleFn'
                    this.addShopCircleData = {..._obj}
                }else {
                    this.addShopCircleEvent = 'addCircleFn'
                    this.addShopCircleData = {
                        area_title: '',
                        area_sort: '',
                        area_image: '',
                    }
                }
                this.modelType = _type
                this.modalWidth = _width

                this.$nextTick().then(() => {
                    this.modelSwitch = true
                })
            },

            // 关闭
            closeFn(){
                this.modelSwitch = false
            },

            // 上传商圈图片
            replyFn(_arr){
                this.addShopCircleData.area_image = _arr[0]
            },

            // 新增商圈
            addCircleFn(){
                let params = {
                    area_title: this.addShopCircleData.area_title,
                    area_sort: this.addShopCircleData.area_sort,
                    area_image: this.addShopCircleData.area_image
                }

                shopCircleAdd(params).then(_data => {


                    // 重置数据
                    this.closeFn()

                    this.$Message.success('添加成功')

                    this.$emit('addCircleFn',{
                        area_id: _data.data.area_id,
                        goods_count: 0,
                        shop_count: 0,
                        ...this.addShopCircleData,
                    })

                    // 重置数据
                    this.addShopCircleData.area_title = ''
                    this.addShopCircleData.area_sort = ''
                    this.addShopCircleData.area_image = ''
                }).catch(_err => {
                    this.$Message.error(_err.message)
                })
            },

            // 编辑商圈
            editCircleFn(){
                let params = {
                    area_title: this.addShopCircleData.area_title,
                    area_sort: this.addShopCircleData.area_sort,
                    area_id: this.addShopCircleData.area_id,
                    area_image: this.addShopCircleData.area_image,
                }

                shopCircleUpdate(params).then(_data => {


                    // 重置数据
                    this.closeFn()

                    this.$Message.success('添加成功')

                    this.$emit('editCircleFn',{...this.addShopCircleData})

                    // 重置数据
                    this.addShopCircleData.area_title = ''
                    this.addShopCircleData.area_sort = ''
                    this.addShopCircleData.area_image = ''
                }).catch(_err => {
                    console.log(_err)
                })
            },

            // 关闭弹窗
            closeFn(){
                this.modelSwitch = false
                this.modelType = ''
            }
        }
    }
</script> 
<style lang="less" scoped>
    .user-message {
        width: 100%;
    }

    .item {
        margin-top: 15px;
    }

    .des {
        margin-top: 5px;
    }

    .timeSpan {
        margin: 0 15px;
    }

    .text-left {
        text-align: left;
        margin-top: 8px;
        margin-left: 22px;
    }

    .user-power {
        width: 300px;
    }

    .clearFloat {
        &:after{
            content: "";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }
        
    }

    .shop-select-item {
        margin-left: 15px;
        float: left;
        margin-top: 15px;
        width: 120px;

        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4) {
            margin-top: 0;
        }

        &:nth-of-type(4n+1) {
            margin-left: 0;
        }
    }

    .shop-name {
        margin-top: 15px;
        font-size: 14px;
        color: #464c5b;
    }

    .poter-name {
        margin-top: 15px;
        font-size: 14px;
        font-weight: bold;
        color: #464c5b;
    }

    .line {
        width: 100%;
        height: 1px;
        background: #ddd;
        margin-top: 15px;
    }

    .binding-code {
        width: 200px;
        height: 200px;
        margin-top: 30px;
    }

    .code-text {
        margin-top: 20px;
    }

    .input {
        width: 100%;
        margin-top: 15px;

        .input-span {
            width: 82px;
            text-align: right;
            padding-right: 15px;
            box-sizing: border-box; 
            font-size: 14px;
        }

        .input-input {
            width: calc(100% - 100px);
            font-size: 12px;
        }

        .input-img {
            width: 200px;
            height: 100px;
            cursor: pointer;
            position: relative;
            top: 0;
            left: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .des {
        margin-top: 5px;
    }
</style>